

<template>
    <div class="main">
        <div class="login">
            <el-form label-position="left" :model="from">
                <el-form-item label="账号">
                    <el-input v-model="from.username"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="from.password" type="password">
                        <template #suffix>
                            <edit />
                        </template>
                    </el-input>
                </el-form-item>

            </el-form>
            <div class="control-account">
                <el-checkbox v-model="isKeep" label="记住密码" />
            </div>
            <el-button type="primary" class="btn" @click="onSubmit">提交</el-button>
        </div>
    </div>
</template>
<script setup>
import { reactive, toRefs ,ref} from "vue"
import { loginStore } from "@/store/login.js"
const login = loginStore()
const from = reactive({
    username: '',
    password: ''
})

// 提交表单
const onSubmit = () => {
    login.getlogin(from)
}

let isKeep = ref(false)



</script>
<style scoped lang="less">
.main {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-image: linear-gradient(180deg, #2af598 0%, #009efd 100%)
}

.login {
    width: 400px;
    // height: 300px;
    background-color: #fff;
    transform: translateY(-50%);
    padding: 24px 30px;
    // background-color: #eee;
}

.btn {
    width: 100%;
}
</style>
